<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spine</title>
  </head>

  <body>
    <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas>
    <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <script src="/dist/cdn/EVA.js"></script>
    <script src="/dist/cdn/EVA.rendererAdapter.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.spine.js"></script>
    <script>
      const {Game, GameObject, resource, RESOURCE_TYPE} = EVA;
      const {RendererSystem} = EVA.plugin.renderer;
      const {Spine, SpineSystem} = EVA.plugin.renderer.spine;

      resource.addResource([
        {
          name: 'anim',
          // @ts-ignore
          type: 'SPINE',
          src: {
            ske: {
              type: 'json',
              url: 'https://pages.tmall.com/wow/eva/b5fdf74313d5ff2609ab82f6b6fd83e6.json',
            },
            // @ts-ignore
            atlas: {
              type: 'atlas',
              url: 'https://pages.tmall.com/wow/eva/b8597f298a5d6fe47095d43ef03210d4.atlas',
            },
            image: {
              type: 'png',
              url: 'https://gw.alicdn.com/tfs/TB1YHC8Vxz1gK0jSZSgXXavwpXa-711-711.png',
            },
          },
        },
      ]);

      const game = new Game({
        systems: [
          new RendererSystem({
            canvas: document.querySelector('#canvas'),
            width: 750,
            height: 1000,
          }),
          new SpineSystem(),
        ],
        autoStart: true,
        frameRate: 60,
      });

      // 此处还在考虑如何设置默认场景的宽高
      game.scene.transform.size = {
        width: 750,
        height: 1000,
      };

      const gameObject = new GameObject('spine', {
        anchor: {
          x: 0.5,
          y: 0.5,
        },
        scale: {
          x: 0.5,
          y: 0.5,
        },
      });
      const spine = new Spine({resource: 'anim', animationName: 'idle'});
      gameObject.addComponent(spine);
      spine.on('complete', e => {
        console.log('动画播放结束', e.name);
      });
      spine.play('idle');
      game.scene.addChild(gameObject);
    </script>
  </body>
</html>
